<!--
 * @Date: 2025-04-02 21:38:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-08 23:47:37
 * @FilePath: /admin-vue/src/views/admin/system/user/index.vue
-->
<script setup lang="ts">
const { load, collection } = useUser()

const columns = [
  {
    title: '#',
    key: 'id',
  },
  {
    title: 'Name',
    key: 'name',
  },
  {
    title: 'Email',
    key: 'email',
  },
  {
    title: 'Created Date',
    key: 'created_at',
  },
  {
    title: 'Updated Date',
    key: 'updated_at',
  },
]

load()
</script>

<template>
  <n-card class="h-full">
    <n-space vertical :size="12">
      <n-space justify="space-between">
        <n-space>
          <n-button type="primary">
            <template #icon>
              <n-icon>
                <icon-add />
              </n-icon>
            </template>
            新增
          </n-button>
          <n-button type="info"> 编辑 </n-button>
          <n-button type="warning"> 审核 </n-button>
          <n-button type="error"> 删除 </n-button>
        </n-space>

        <n-input>
          <template #suffix>
            <n-icon class="cursor-pointer"><icon-search /></n-icon>
          </template>
        </n-input>
      </n-space>

      <n-data-table
        :columns="columns"
        :data="collection?.data"
        flex-height
        style="height: calc(100vh - 172px)"
      />
    </n-space>
  </n-card>
</template>
